<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>蓝黄条</title>
<style>
body,ul{margin:0;padding:0;}
li{list-style:none;}
.box{width:500px; height:162px; background:#cccccc; margin:30px auto; padding:10px;}/* 宽高要剪掉自身的内边距padding值(什么时候需要减掉padding值，只有在自身出现padding时) */
.box li{line-height:17px;margin:5px 0;}
.left{width:300px;background:#336699;float:left;}
.right{width:200px;background:#ff9900; float:left;}
</style>
</head>

<body>
<ul class="box">
  <li class="left">1</li>
  <li class="right">2</li>
  <li class="left">3</li>
  <li class="right">4</li>
  <li class="left">5</li>
  <li class="right">6</li>
  <li class="left">7</li>
  <li class="right">8</li>
  <li class="left">9</li>
  <li class="right">10</li>
  <li class="left">11</li>
  <li class="right">12</li>
</ul>
</body>
</html>
